<template>
    <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
        <div class="relative py-3 sm:max-w-xl sm:mx-auto">
            <div
                class="absolute inset-0 bg-gradient-to-r from-blue-300 to-blue-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl">
            </div>
            <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
                <div class="max-w-md mx-auto">
                    <div>
                        <h1 class="text-2xl font-semibold">欢迎登录Codesky后台系统</h1>
                    </div>
                    <div class="divide-y divide-gray-200">
                        <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
                            <div class="relative">
                                <input autocomplete="off" v-model="loginForm.email" id="email" name="email" type="text"
                                    class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600"
                                    placeholder="Email address" />
                                <label for="email"
                                    class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">账号</label>
                            </div>
                            <div class="relative">
                                <input autocomplete="off" v-model="loginForm.password" id="password" name="password"
                                    type="password"
                                    class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600"
                                    placeholder="Password" />
                                <label for="password"
                                    class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">密码</label>
                            </div>
                            <div class="relative">
                                角色：
                                <el-select v-model="loginForm.role" placeholder="Select" size="large" style="width: 240px">
                                    <el-option v-for="item in roleList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                            <div class="relative">
                                <button class="bg-blue-500 text-white rounded-md px-2 py-1" @click="login">登录</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import API from '@/plugins/axiosInstance';
import { useRouter } from 'vue-router';
import { userStore } from '../store'
import { ElNotification, ElMessage } from 'element-plus'

const roleList = [
  {
    value: '1001',
    label: '超级管理员',
  },
  {
    value: '1003',
    label: '教师',
  }
]
const loginForm = reactive({
    email: '',
    password: '',
    role:'1001',
})
const router = useRouter()
/**
* 登录
*/
function login() {
    API({
        url: '/superLogin',
        data: loginForm,
        method: 'post'
    }).then((res) => {
        if (res.data.state == 40001) {
            userStore().setUser(res.data.data)
            if(loginForm.role === '1001'){
                router.push({
                path: '/admin/setting'
                })
            }else{
                router.push({
                path: '/teacher/classList'
                })
            }

        }
        showMsg(res.data.state, res.data.message)
    })
}

const showMsg = (state: number, message: string) => {
    if (state === 40001) {
        ElMessage({
            message: message,
            type: 'success'
        })
    } else {
        ElMessage.error(message)
    }
}
</script>